<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  height: 100vh;
			  background: #1A1E23;
			}
			
			.float-text-menu {
			  display: flex;
			  flex-direction: column;
			  list-style-type: none;
			}
			.float-text-menu li a {
			  display: flex;
			  padding: 6px;
			  color: white;
			  font-family: Lato, sans-serif;
			  text-decoration: none;
			  overflow: hidden;
			}
			.float-text-menu li a span {
			  position: relative;
			  transition: 0.3s;
			}
			.float-text-menu li a span::before {
			  position: absolute;
			  content: attr(data-text);
			  transform: translateY(130%);
			}
			.float-text-menu li a:hover span {
			  transform: translateY(-130%);
			}
		</style>
	</head>
	<body>
		<ul class="float-text-menu">
		  <li><a href="#" data-text="Home">Home</a></li>
		  <li><a href="#" data-text="Archives">Archives</a></li>
		  <li><a href="#" data-text="Tags">Tags</a></li>
		  <li><a href="#" data-text="Categories">Categories</a></li>
		  <li><a href="#" data-text="About">About</a></li>
		</ul>
	</body>
</html>
<script>
	"use strict";
	let floatTextMenuLinks = document.querySelectorAll(".float-text-menu li a");
	floatTextMenuLinks.forEach(link => {
	    let letters = link.textContent.split("");
	    link.textContent = "";
	    letters.forEach((letter, i) => {
	        let span = document.createElement("span");
	        span.textContent = letter;
	        span.style.transitionDelay = `${i / 20}s`;
	        span.dataset.text = letter;
	        link.append(span);
	    });
	});

</script>